<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>华为商城</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="outer">
    <!----- 快捷导航 ----->
    <div class="shortcut">
      <div class="wrapper">
        <ul class="left">
          <li><a href="#">华为官网</a></li>
          <li><a href="#">荣耀官网</a></li>
          <li><a href="#">软件应用</a></li>
          <li><a href="#">花粉俱乐部</a></li>
          <li><a href="#">Select Region</a></li>
        </ul>
        <ul class="right">
          <li><a href="#">登录</a></li>
          <li><a href="#">注册</a></li>
          <li><a href="#">我的订单</a></li>
          <li><a href="#">V码(优购码)</a></li>
          <li><a href="#">手机版</a></li>
          <li><a href="#">网站导航</a></li>
        </ul>
      </div>
    </div>
    <!-- 华为专区 -->
    <div class="header wrapper">
      <!-- logo -->
      <div class="logo">
        <h1><a href="#"></a></h1>
        <p>商城首页</p>
      </div>
      <!-- 导航 -->
      <div class="scan">
        <h1><a href="#"></a></h1>
        <p>微信扫码关注我们</p>
      </div>
    </div>
    <!-- 红色区域 -->
    <div class="red-tab">
      <div class="wrappar">
        <div class="all-project">
          <span>全部商品</span>
        </div>

        <ul>
          <li>华为专区</li>
          <li>HUAWEI P10</li>
          <li>HUAWEI Mate9</li>
          <li>HUAWEI Nova</li>
          <li>华为畅享6S</li>
          <li>荣耀专区</li>
        </ul>
      </div>

    </div>
    <!-- banner -->
    <div class="banner">
      <div class="wrappar">
        <!-- 侧导航 -->
        <div class="subnav">
            <dl>
              <li>
                <dt>手机</dt>
                <dd><a href="#">HUAWEI Mate系列</a></dd>
              </li>

              <li>
                <dt>平板 & 穿戴</dt>
                <dd><a href="#">平板电脑</a></dd>
                <dd><a href="#">手环/手表</a></dd>
              </li>

              <li>
                <dt>笔记本电脑</dt>
                <dd></dd>
              </li>

              <li>
                <dt>智能家居</dt>
                <dd><a href="#">子母路由</a></dd>
                <dd><a href="#">电力猫</a></dd>
                <dd><a href="#">路由器</a></dd>
              </li>

              <li>
                <dt>专属配件</dt>
                <dd><a href="#">贴膜</a></dd>
                <dd><a href="#">保护壳</a></dd>
                <dd><a href="#">保护套</a></dd>
              </li>

              <li>
                <dt>通用配件</dt>
                <dd><a href="#">耳机</a></dd>
                <dd><a href="#">音箱</a></dd>
              </li>
            </dl>


        </div>
        <div class="dot-indicator">
          <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
          </ul>
        </div>

      </div>
    </div>
    <!-- 图片区域 -->
    <div class="photo1 wrapper">
      <div class="left">
        <div class="bd">
          <ul>
            <li>
              <a href="#">
                <div class="pic"><img src="./images/20170310105644358.jpg" alt=""></div>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="pic"><img src="./images/2017031017165551.jpg" alt=""></div>
        
              </a>
            </li>
            <li>
              <a href="#">
                <div class="pic"><img src="./images/20170310090516264.jpg" alt=""></div>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="pic"><img src="./images/20170313143419135.jpg" alt=""></div>
              </a>
            </li>
          </ul>
        
        </div>
        <div class="bd1">
          <ul>
            <li>
              <div class="info">
                <h4>HUAWEIP10 Plus</h4>
                <p class="mark">金属钻散工艺</p>
                <p class="price">￥4388</p>
              </div>
        
              <div class="pic"><img src="./images/1489161234073.png" alt=""></div>
        
            </li>
            <li>
              <div class="info">
                <h4>HUAWEI nova青春版</h4>
                <p class="mark">炫出我色彩</p>
                <p class="price">￥1999</p>
              </div>
              <div class="pic"><img src="./images/1491476650727.png" alt=""></div>
        
            </li>
            <li>
              <div class="info">
                <h4>HUAWEI Mate 9 Pro</h4>
                <p class="mark">2k双曲面屏</p>
                <p class="price">￥4699</p>
              </div>
              <div class="pic"><img src="./images/1484219138436.png" alt=""></div>
            </li>
          </ul>
        </div>
      </div>
    <!-- <div class="right">
      <img src="./images/arrlcon_03.jpg" alt="">
    </div> -->
    </div>
    <!-- 服务 -->
    <div class="service">
      <div class="wrappar">
        <ul>
          <li>
            <h5></h5>
            <p>500强企业 品质保证
            </p>
          </li>
          <li>
            <h5></h5>
            <p>7天退货 15天换货</p>
          </li>
          <li>
            <h5></h5>
            <p>99元起免运费</p>
          </li>
          <li>
            <h5></h5>
            <p>448家维修网点 全国联保</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 帮助中心 -->
    <div class="support-container">
      <div class="wrappar">
        <div class="support-section">
          <div class="title">
            <div class="icon-container help-center-icon"></div>
            <h2 class="section-title">帮助中心</h2>
          </div>
          <ul class="link-list">
            <li><a href="#" class="support-link">购物指南</a></li>
            <li><a href="#" class="support-link">配送方式</a></li>
            <li><a href="#" class="support-link">支付方式</a></li>
            <li><a href="#" class="support-link">常见问题</a></li>
          </ul>
        </div>
        <div class="support-section">
          <div class="title">

            <div class="icon-container after-sales-icon"></div>
            <h2 class="section-title">售后服务</h2>
          </div>
          <ul class="link-list">
            <li><a href="#" class="support-link">保修政策</a></li>
            <li><a href="#" class="support-link">退换货政策</a></li>
            <li><a href="#" class="support-link">退换货流程</a></li>
            <li><a href="#" class="support-link">保修状态查询</a></li>
          </ul>
        </div>
        <div class="support-section">
          <div class="title">

            <div class="icon-container tech-support-icon"></div>
            <h2 class="section-title">技术支持</h2>
          </div>
          <ul class="link-list">
            <li><a href="#" class="support-link">售后网点</a></li>
            <li><a href="#" class="support-link">荣耀零售店铺</a></li>
            <li><a href="#" class="support-link">预约维修</a></li>
            <li><a href="#" class="support-link">手机寄修服务</a></li>
            <li><a href="#" class="support-link">维修备件价格查询</a></li>
            <li><a href="#" class="support-link">软件下载</a></li>
          </ul>
        </div>
        <div class="support-section">
          <div class="title">

            <div class="icon-container about-store-icon"></div>
            <h2 class="section-title">关于商城</h2>
          </div>
          <ul class="link-list">
            <li><a href="#" class="support-link">公司介绍</a></li>
            <li><a href="#" class="support-link">华为商城简介</a></li>
            <li><a href="#" class="support-link">联系客服</a></li>
          </ul>
        </div>
        <div class="support-section">
          <div class="title">

            <div class="icon-container follow-us-icon"></div>
            <h2 class="section-title">关注我们</h2>
          </div>
          <ul class="link-list">
            <li><a href="#" class="support-link">新浪微博</a></li>
            <li><a href="#" class="support-link">腾讯微博</a></li>
            <li><a href="#" class="support-link">花粉俱乐部</a></li>
            <li><a href="#" class="support-link">商城手机版</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="wrappar">
        <div class="footer-links">
          <span class="footer-title"></span>
          <!-- 友情链接 -->
          <ul class="links-list">
            <li><a href="#">友情链接：</a></li>
            <li><a href="#">华为官网</a></li>
            <li><a href="#">华为消费者业务</a></li>
            <li><a href="#">荣耀官网</a></li>
            <li><a href="#">花粉俱乐部</a></li>
            <li><a href="#">莫塞尔商城</a></li>
            <li><a href="#">爱旅官网</a></li>
            <li><a href="#">华为应用市场</a></li>
            <li><a href="#">万表网</a></li>
            <li><a href="#">中商情报网</a></li>
            <li><a href="#">刷机精灵</a></li>
            <li><a href="#">华为手机</a></li>
            <li><a href="#">优购物官网</a></li>
            <li><a href="#">智能电视</a></li>
            <li><a href="#">UC浏览器</a></li>
            <li><a href="#">中关村商城</a></li>
            <li><a href="#">酷狗音乐</a></li>
            <li><a href="#">华为商城手机版</a></li>
            <li><a href="#">百信手机网</a></li>
            <li><a href="#">卡宝宝网</a></li>
            <li><a href="#">多特软件下载</a></li>
            <li><a href="#">同步助手</a></li>
            <li><a href="#">蜂鸟摄影网</a></li>
            <li><a href="#">奇珀论坛</a></li>
            <li><a href="#">家具商城</a></li>
            <li><a href="#">拍鞋网商城</a></li>
            <li><a href="#">欧宝丽珠宝</a></li>
            <li><a href="#">寻购网</a></li>
            <li><a href="#">亿智蘑菇</a></li>
            <li><a href="#">安卓市场</a></li>
            <li><a href="#">阿里巴巴生意经</a></li>
            <li><a href="#">手机大全</a></li>
            <li><a href="#">安卓软件园</a></li>
            <li><a href="#">卓大师刷机</a></li>
            <li><a href="#">智机论坛</a></li>
            <li><a href="#">电子产品世界</a></li>
            <li><a href="#">历趣网</a></li>
            <li><a href="#">网购返利</a></li>
            <li><a href="#">Apple110</a></li>
            <li><a href="#">91手机门户网</a></li>
            <li><a href="#">移动叔叔</a></li>
            <li><a href="#">奥特莱斯</a></li>
            <li><a href="#">荣耀Magic</a></li>
            <li><a href="#">携程租车</a></li>
            <li><a href="#" class="special-link">申请链接 &gt;&gt;</a></li>
          </ul>
        </div>
        <!-- 隐私政策 -->
        <div class="footer-info">
          <span>隐私政策 | 服务协议 Copyright © 2012-2017 VMALL.COM 版权所有 保留一切权利</span>
        </div>
        <!-- 备案信息 -->
        <div class="footer-certificates">
          <span>苏公网安备 32011402010009号</span> |
          <span>苏ICP备09062682号-9</span> |
          <span>增值电信业务经营许可证：苏B2-20130048</span> |
          <span>网络文化经营许可证：苏网文[2015] 1599-026号</span>
        </div>
        <!-- 备案图片 -->
        <div class="footer-picture">
          <img src="./images/20161224180914742.jpg" alt="">
          <img src="./images/20160226162415360.png" alt="">
          <img src="./images/20160226162521265.png" alt="">
          <img src="./images/20160226162531395.png" alt="">
        </div>

      </div>
    </div>
  </div>
</body>

</html>